<template>
  <div>
    <div class="container">
      <div class="header">
        <span class="header-name">聚造商场</span>
        <div class="input"><img src="../assets/1@2x.png"><span>搜索关键字</span></div>
        <div class="img1"><img src="../assets/2@2x.png"></div>
      </div>
      <div class="fenlei">
         <img  class=fenlei-left src="../assets/3@2x.png">
         <span class=" fenlei1">新品首晒</span>
         <img class= fenlei-midden1 src="../assets/4@2x.png">
         <span class="fenlei2">高端定制</span>
          <img  class= fenlei-midden2 src="../assets/5@2x.png">
          <span class="fenlei3">会员中心</span>
          <img class="fenlei-right" src="../assets/6@2x.png">
          <span class="fenlei4">全部分类</span>
      </div>
      <div class="content"><span class="recommend">为你推荐</span>
        <span class="new">New</span>
        <span class="content3">简雅新中式，极致的东方惊艳!</span>
      </div>
      <div class="recommends">
        <div v-for="recommend in recommends" :key="recommend.id">
        <img :src="baseURL+recommend.img"/>
        <div class="recommend-title">
          <p>{{ recommend.title }}</p>
        </div>
        </div> 
        <div @click="getRecommends(1)" v-if="recommends.length<getRecommendsTotal" class="jiazai">点击加载更多</div>
        <div v-else class="daodi">已经到底了哟</div>
      </div>
      <banner></banner>
      <!-- <div class="bottem">
        <img class="bottem-img1" src="../assets/14@2x.png">
        <span class="bottem-span1">首页</span>
        <img class="bottem-img2" src="../assets/15@2x.png">
        <span class="bottem-span2">分类</span>
         <img class="bottem-img3" src="../assets/16@2x.png">
        <span class="bottem-span3">购物车</span>
        <img class="bottem-img4" src="../assets/17@2x.png">
        <span class="bottem-span4">个人中心</span> 
      </div> -->
  </div>
  </div>
</template>

<script>
import api from '../api/index'
import banner from './banner.vue'
export default {
  name: '',
  props: {
   
  },
  components:{banner},
  data(){
    return {
      recommends:[],
      baseURL:api.baseURL,
      params:{
        pageNum:1
      },
      getRecommendsTotal:0
      
    }
  },
  methods:{
    getRecommends(addNum){
      this.params.pageNum += addNum
      this.$http({
        url:'/index/recommends',
        params:this.params
      }).then(res =>{
        this.getRecommendsTotal = res.total
        for(let i =0;i< res.rows.length;i++){
          this.recommends.push(res.rows[i])
        }
            
      })
    }
  },
  mounted() {
    this.getRecommends(0)
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
body html {
      margin: 0;
      padding: 0;

    }
    .container {
      width: 750rem;
      margin: 0 auto;
      
           
    }
    .header {
      position: relative;
       width: 375px;
       height: 170.73px;
       margin: 0;
       background-color: rgb(67,74, 84);
    }
    .header .header-name {
      position: absolute;
      font-family:     Microsoft YaHei UI;
      color: white;
      font-size: 18px;
      left: 21px;
      top: 54px;
    }
    .input {
      position: absolute;
      width: 159px;
      height: 34px;
      border-radius:25px;
      background-color: white;
      left: 108px;
      top: 49px;
      
    }
    .input img {
      position: absolute;
      top: 8px;
      left: 12px;
    }
    .input span {
      position: absolute;
      top: 8px;
      left: 50px;
      font-family:     Microsoft YaHei UI;
      font-size: 12px;
      color: #b5b3b0ff;
    }
    .img1 img {
      position: absolute;
      width: 338px;
      height: 172px;
      top: 103px;
      left: 19px;
    }
    .fenlei {
      position: relative;
      width: 338px;
      height: 114px;
      margin-left: 19px;
      margin-top: 105.27px;
    }
    .fenlei-left {
      position: absolute;
      width: 70px;
      height: 70px;
      left: 14px;
      top: 14px;
      
    }
    .fenlei-midden1 {
      position: absolute;
      width: 70px;
      height: 70px;
      left: 94px;
      top: 14px;
      
    }
    .fenlei-midden2 {
      position: absolute;
      width: 70px;
      height: 70px;
      left: 174px;
      top: 14px;
      
    }
    .fenlei-right{
      position: absolute;
      width: 70px;
      height: 70px;
      left: 254px;
      top: 14px;
     
    }
    .fenlei1 {
      position: absolute;
      font-size:    14px ;
      color:#707070ff ;
      font-family: Microsoft YaHei UI ;
      bottom: 13px;
      left: 21px;
    }
    .fenlei2 {
      position: absolute;
      font-size:    14px ;
      color:#707070ff ;
      font-family: Microsoft YaHei UI ;
      bottom: 13px;
      left: 101px;
    }
    .fenlei3 {
      position: absolute;
      font-size:    14px ;
      color:#707070ff ;
      font-family: Microsoft YaHei UI ;
      bottom: 13px;
      left: 181px;
    }
    .fenlei4 {
      position: absolute;
      font-size:    14px ;
      color:#707070ff ;
      font-family: Microsoft YaHei UI ;
      bottom: 13px;
      left: 261px;
    }
    .content {
      position: relative;
      width: 338px;
      margin-left: 19px;
    }
    .content .recommend {
      position: absolute;
      top: 23px;
      left: 15px;
      font-family:    Microsoft YaHei UI ;
      font-size: 16px;
      color:#707070ff ;
    }
    .content .new {
      position: absolute;
      top: 25px;
      left: 102px;
      font-size:  15px;
      font-family:Microsoft YaHei UI ;
      color: red;
    }
    .content .content3 {
      position: absolute;
      top: 25px;
      left: 142px;
      font-size: 14px;
      font-family:Microsoft YaHei UI ;
      color: #707070ff;
    }
    .content-img {
      position: relative;
      width: 338px;
      height: 820px;
      margin-left: 19px;
      margin-top: 59px;
     

    }
    .content-img .img1{
      width: 338px;
      height: 191px;

      
    }
    .content-img .img2{
      position: absolute;
      width: 338px;
      height: 191px;
      top: 208px;
      left: 0px;

    }
    .content-img .img3{
      position: absolute;
      width: 338px;
      height: 191px;
      top: 417px;
      left: 0px;

    }
    .content-img .img4{
      position: absolute;
      width: 338px;
      height: 191px;
      top: 626px;
      left: 0px;

    }
    .bottem {
      position: relative;
      width: 375px;
      height: 49px;
      margin-top: 50px;
    }
    .bottem .bottem-img1 {
       position: absolute;
       top: 9px;
       left: 50px;
       width: 22px;
       height: 22px;
    }
    .bottem .bottem-span1 {
      position: absolute;
      font-size:14px ;
      font-family:    Microsoft YaHei UI ;
      top:33px ;
      color: #2a4458ff;
      left: 48px;      
    }
    .bottem .bottem-img2 {
       position: absolute;
       top: 9px;
       left: 132px;
       width: 22px;
       height: 22px;
    }
    .bottem .bottem-span2 {
      position: absolute;
      font-size:14px ;
      font-family:    Microsoft YaHei UI ;
      top:33px ;
      color: #2a4458ff;
      left: 129px;      
    }
    .bottem .bottem-img3 {
       position: absolute;
       top: 9px;
       left: 214px;
       width: 22px;
       height: 22px;
    }
    .bottem .bottem-span3 {
      position: absolute;
      font-size:14px ;
      font-family:    Microsoft YaHei UI ;
      top:33px ;
      color: #2a4458ff;
      left: 212px;      
    }
    .bottem .bottem-img4 {
       position: absolute;
       top: 9px;
       left: 294px;
       width: 22px;
       height: 22px;
    }
    .bottem .bottem-span4 {
      position: absolute;
      font-size:14px ;
      font-family:    Microsoft YaHei UI ;
      top:33px ;
      color: #2a4458ff;
      left: 283px;      
    }
    .recommends{
      margin-top: 50px;
      margin-left: 20px;
    }
    .recommends img {
      width: 338px;
      height: 172px;
      margin-top: 30px;
    }
    .recommend-title {
      position: relative;
      margin-top: -2px;
      background: linear-gradient(271deg, #DBC6B6 0%, #C88D63 100%);
      width: 338px;
      height: 40px;
    }
    .recommend-title p {
      position: absolute;
      top: -2px;
      left: 10px;
      font-size: 15px;
 font-family: Microsoft YaHei UI-Regular, Microsoft YaHei UI;
  font-weight: 400;
  color: #FFFFFF;
    }
    .jiazai {
      font-size: 15px;
    }
    .daodi{
      font-size: 15px;
    }
</style>
